<template>
	<view class="topic-list uflex-a-j_fsc animated fadeInRightBig faster" @tap="openDetail">
		<image :src="item.titlepic" mode="widthFix" lazy-load></image>
		<view class="topic-list-r uflex-j_fs">
			<view class="title">{{item.title}}</view>
			<view class="content">{{item.desc}}</view>
			<view class="demo">
				动态<text>{{item.totalnum}}</text>今日<text>{{item.todaynum}}</text>
			</view>								
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item: Object,
			index: Number
		},
		methods: {
			openDetail() {
				uni.navigateTo({
					url: '../../pages/topic-detali/topic-detali',
					animationType: 'zoom-fade-out'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topic-list{
		padding: 10upx 0;
		margin-bottom: 10upx;
		border-bottom: 1px solid #eee;
		width: 100%;
		box-sizing: border-box;
		> image{
			margin-right: 20upx;
			min-width: 150upx;
			max-width: 150upx;
			height: 150upx;
			border-radius: 10upx;
		}
		> .topic-list-r{
			flex-direction: column;
			overflow: hidden;
			color:#a4a4a4;
			> .title{
				font-size: 32upx;
				color: #333;
			}
			> .content{
				width: 100%;
				flex-wrap: nowrap;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.demo{
				> text{
					padding-left: 15upx;
					padding-right: 20upx;
				}
			}
		}
	}
</style>
